<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :title="title"
    width="60%"
    @close="close"
  >
    <el-table
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :stripe="stripe"
    >
      <!--  TODO element-plus未知原因不支*持拖拽后宽度重新计算，暂时放弃 -->
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :min-width="item.minWidth"
        :prop="item.prop"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
      >
        <template #default="{ row }">
          <span v-if="item.prop == 'user_info'">
            <span v-if="row[item.prop] != null && row[item.prop] != ''">
              <div
                v-if="item.label == '#'"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <el-image
                  class="keFuImg"
                  :lazy="true"
                  :preview-src-list="imageFun(row)"
                  preview-teleported
                  :src="row[item.prop].avatar"
                  style="border-radius: 50%"
                />
              </div>
              <span v-else-if="item.label == '昵称'">
                {{ row[item.prop].nickname }}
              </span>
              <span v-else-if="item.label == '性别'">
                {{ row[item.prop].gender == 1 ? '男' : '女' }}
              </span>
            </span>
          </span>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :layout="layout"
      :page-size="queryForm.page_size"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </el-dialog>
</template>

<script>
  import { getWeComCustList } from '@/api/enterpriseWeChat/weCom'
  import { Plus, Search } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'TableCustomListEdit',
    components: {},
    setup() {
      const state = reactive({
        editBookRef: null,
        title: '',
        columns: [
          {
            label: 'ID',
            prop: 'id',
            minWidth: 50,
          },
          {
            label: '#',
            prop: 'user_info',
            minWidth: 50,
          },
          {
            label: '昵称',
            prop: 'user_info',
            minWidth: 50,
          },
          {
            label: '性别',
            prop: 'user_info',
            minWidth: 50,
          },
          {
            label: '回复内容',
            prop: 'reply_content',
            minWidth: 100,
          },
          {
            label: '回复时间',
            prop: 'reply_at',
            minWidth: 50,
          },
        ],
        height: 400,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          page: 1,
          page_size: 10,
          corp_id: '',
          open_kfid: '',
        },
        list: [],
        border: true,
        stripe: false,
        listLoading: true,
        dialogFormVisible: false,
      })
      const finallyColumns = computed(() => {
        return state.columns
      })
      const showEdit = async (corp_id, open_kfid) => {
        state.title = '客户回复列表'
        state.queryForm.corp_id = corp_id
        state.queryForm.open_kfid = open_kfid
        weComCustLisData()
        state.dialogFormVisible = true
      }
      const handleSizeChange = (val) => {
        state.queryForm.page_size = val
        const pageMax = Math.ceil(state.total / val)
        if (state.queryForm.page <= pageMax) {
          weComCustLisData()
        }
      }
      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        weComCustLisData()
      }
      const weComCustLisData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getWeComCustList(state.queryForm)
        console.log(list)
        if (list) {
          state.list = list
          state.total = total
        }
        state.listLoading = false
      }
      const imageFun = (row) => {
        console.log(row)
        const list = []
        list.push(row.user_info.avatar)
        return list
      }
      const close = () => {
        state.list = []
        state.dialogFormVisible = false
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        finallyColumns,
        Plus,
        Search,
        imageFun,
        handleSizeChange,
        handleCurrentChange,
      }
    },
  })
</script>
<style lang="scss" scoped></style>
